@extends('admin.layouts.app')

@section('right-content')
    <fieldset class="layui-elem-field layui-field-title">
        <legend>
        <span class="layui-breadcrumb">
            <a href="javascript:;">游戏管理</a>
            <a><cite>房间列表</cite></a>
        </span>
        </legend>
    </fieldset>

    <table id="dateTable" class="layui-table">
        <thead>
        <tr>
            <th><input type="checkbox" class="my-checkbox" /></th>
            <th>房间ID</th>
            <th>房间名称</th>
            {{-- <th>图片</th> --}}
            <th>最大数值</th>
            <th>最小数值</th>
            <th>桌子数</th>
            <th>总在线人数</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        @foreach($rooms as $room)
            <tr>
                <td><input type="checkbox" class="my-checkbox" data-id="{{ $room->room_id }}" /></td>
                <td>{{ $room->room_id }}</td>
                <td>{{ $room->room_name }}</td>
                {{-- <td><img src="{{ asset($room->thumbnail) }}" width="100" height="100"></td> --}}
                <td>{{ $room->max }}</td>
                <td>{{ $room->min }}</td>
                <td>{{ $room->table_count }}</td>
                <td>{{ $room->gamer_count }}</td>
                {{-- <td>@if($room->status == 1) 启用 @else 停用 @endif</td> --}}
                <td>
                    <span class="layui-form">
                        <input type="checkbox" lay-skin="switch" lay-text="上线|下线" lay-filter="status" value="{{ $room->room_id }}" @if($room->status == 1) checked=""@endif>
                    </span>
                </td>
                <td>
                    <button class="layui-btn layui-btn-small layui-btn-normal edit" data-url="{{ route('gamerooms.edit', ['id' => $room->room_id]) }}">编辑</button>
                    {{-- <button class="layui-btn layui-btn-small layui-btn-danger delete" data-url="{{ route('gamerooms.destroy', ['id' => $room->room_id]) }}">删除</button> --}}
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

@endsection

@section('my-js')
<script type="text/javascript" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{ asset('admin/js/table-tool.js') }}"></script>
<script type="text/javascript">
    layui.use(['layer', 'form'], function() {
        var $ = layui.jquery,form = layui.form,layer = layui.layer;

        // 初始化表格
        $('#dateTable').DataTable({
            "dom": '<"top"f>rt<"bottom"lp><"clear">',
            "autoWidth": false,                     // 自适应宽度
            "stateSave": true,                      // 刷新后保存页数
            "order": [[ 1, "desc" ]],               // 排序
            "searching": true,                     // 本地搜索
            "info": true,                           // 控制是否显示表格左下角的信息
            "stripeClasses": ["odd", "even"],       // 为奇偶行加上样式，兼容不支持CSS伪类的场合
            "ColumnDefs": [{                      // 指定列不参与排序
                "orderable": false,
                "targets": [0,2,7,8]                   // 对应你的表格的列数
            }],
            "pagingType": "simple_numbers",         // 分页样式 simple,simple_numbers,full,full_numbers
            "language": {                           // 国际化
                "url":"{{ asset('admin/language.json') }}"
            },
            initComplete: function() {
                // $('.top').append('<span class="fl"><a class="layui-btn btn-add btn-default" id="btn-add-article" href="{{ route('gamerooms.create') }}">添加房间</a><a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a></span>');
                $('.top').append('<span class="fl"><a class="layui-btn btn-add btn-default" id="btn-add-article" href="{{ route('gamerooms.create') }}">添加房间</a></span>');
            }
        });

        // 例:获取ids
        $(document).on('click','#btn-delete-all', function(){
            // getIds(table对象,获取input为id的属性)
            var list = getIds($('#dateTable'),'data-id');
            if(list == null || list == ''){
                layer.msg('未选择');
            }else{
                // layer.msg(list);
                layer.confirm('is not?', {icon: 3, title:'提示', content:'您确定要删除吗？'}, function(index){
                    layer.close(index);
                    $.post("{{ route('gamerooms.destroyList') }}", {ids : list}, function(data) {
                        console.log(data);
                        if (data.status == 0) {
                            top.layer.msg(data.msg, {icon: 1, time: 2000});
                            window.location.href = data.url;
                        } else {
                            top.layer.msg(data.msg, {icon: 2, time: 2000});
                            window.location.reload();
                        }
                    },'json');
                });
            }
        });

        form.on('switch(status)', function(data) {
            top.layer.load(1); //loading层
            status = this.checked ? 1 : 0;
            id = data.value;
            $.post('/admin/gamerooms/'+id+'/edit', {status : status, _method : 'PUT'}, function(data){
                top.layer.closeAll('loading');
                if (data.status == 0) {
                    top.layer.msg(data.msg, {icon: 1, time: 2000});

                } else {
                    top.layer.msg(data.msg, {icon: 2, time: 2000});
                    window.location.reload();
                }
            },'json');
        })

        $(document).on('click','.edit', function(){
            var url = $(this).attr('data-url');
            window.location.href = url;
        });


        $(document).on('click','.delete', function(){
            var url = $(this).attr('data-url');
            commonAjaxRequest(url, 'DELETE')
        });

    })

</script>
@endsection